<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->


<dom-module id="shop-find">
    <template>
        <style include="shop-common-styles">
            paper-icon-item div[slot=item-icon]{
                padding: 10px 10px 10px 0px;
            }
            paper-icon-item img{
                height: 40px;
                width: 40px;
            }
            paper-icon-item iron-icon{
                color: #666;
            }
            paper-item-body div[secondary]{
                font-size: 12px;
            }
            paper-listbox a{
                color: #000;
                text-decoration: none;
            }
            .arrow{
                width: 25px;
                height: 25px;
            }
        </style>
        <plugin-xhr id="xhr_open_page" url="[[app.apiHost]]/wx.app.call?name=openPage"></plugin-xhr>
        <plugin-xhr id="xhr_plugin_list_by_category_point" url="[[app.apiHost]]/plugin.list.by.category.point" response="{{plugins}}" response-property="result" on-success="_pluginSuccess"></plugin-xhr>
        <plugin-xhr id="xhr_news_count" url="[[app.apiHost]]/product.news.week.count?app_id=[[app.appId]]" response="{{news_count}}" on-success="_newsCountSuccess"></plugin-xhr>
        <plugin-xhr id="xhr_coupon_count" url="[[app.apiHost]]/coupon.count?app_id=[[app.appId]]" response="{{coupon_count}}" on-success="_couponCountSuccess"></plugin-xhr>
        <plugin-xhr id="xhr_discount_count" url="[[app.apiHost]]/discount.count?app_id=[[app.appId]]" response="{{discount_count}}" on-success="_discountCountSuccess"></plugin-xhr>
        <plugin-content-view visible="{{visible}}" contents="{{layout.find_top}}" width="[[pageWidth]]"></plugin-content-view>
        <paper-listbox>
            <a href="{{rootPath}}find-news" hidden="[[!haveNews]]">
              <paper-icon-item>
                <div slot="item-icon">
                  <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z" class="style-scope iron-icon"></path></g></svg>
                </div>
                <paper-item-body two-line>
                  <div>新品</div>
                  <div secondary>本周[[news_count.result.count]]款新品上架</div>
                </paper-item-body>
                <iron-icon icon="chevron-right"></iron-icon>
              </paper-icon-item>
            </a>
            <a href="{{rootPath}}find-coupon" hidden="[[!haveCoupon]]">
              <paper-icon-item>
                  <div slot="item-icon">
                  <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z" class="style-scope iron-icon"></path></g></svg>
                  </div>
                <paper-item-body two-line>
                  <div>优惠卷</div>
                  <div secondary>[[coupon_count.result.count]]账优惠卷可领取</div>
                </paper-item-body>
                <div class="arrow">
                    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" class="style-scope iron-icon"></path></g></svg>
                </div>
              </paper-icon-item>
            </a>
            <a href="{{rootPath}}find-discount" hidden="[[!haveDiscount]]">
                <paper-icon-item>
                <div slot="item-icon">
                    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z" class="style-scope iron-icon"></path></g></svg>
                </div>
                <paper-item-body two-line>
                  <div>促销</div>
                  <div secondary>[[discount_count.result.count]]个促销活动进行中</div>
                </paper-item-body>
                <div class="arrow">
                    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" class="style-scope iron-icon"></path></g></svg>
                </div>
              </paper-icon-item>
            </a>
            <template is="dom-repeat" items="[[plugins]]" as="plugin">
                <a on-click="_openPlugin">
                    <paper-icon-item>
                    <img slot="item-icon" src="[[plugin.config.icon]]"/>
                    <paper-item-body two-line>
                      <div>[[plugin.display_name]]</div>
                      <div secondary>[[plugin.config.summary]]</div>
                    </paper-item-body>
                    <div class="arrow">
                    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" class="style-scope iron-icon"></path></g></svg>
                </div>
                  </paper-icon-item>
                </a>
            </template>
        </paper-listbox>
        <template is="dom-if" if="[[_isAllNot(haveNews,haveCoupon,haveDiscount,havePlugin)]]">
            <div style="display: flex;justify-content: center;align-items: center;padding: 10px; flex-direction: column;">
                <p><svg viewBox="0 0 64 64" style="background:#fff;width:50px;height:50px;"><g><path d="M32 4c15.6 0 28 12.4 28 28s-12.4 28-28 28-28-12.4-28-28 12.4-28 28-28zM32 0c-17.6 0-32 14.4-32 32s14.4 32 32 32 32-14.4 32-32-14.4-32-32-32v0z"></path><path d="M28 24c0 2.209-1.791 4-4 4s-4-1.791-4-4c0-2.209 1.791-4 4-4s4 1.791 4 4z"></path><path d="M44 24c0 2.209-1.791 4-4 4s-4-1.791-4-4c0-2.209 1.791-4 4-4s4 1.791 4 4z"></path><path d="M16 40h32v4h-32v-4z"></path></g></svg></p>
                <p>没有任何有趣的事情</p>
            </div>
        </template>
        <plugin-content-view visible="{{visible}}" contents="{{layout.find_bottom}}" width="[[pageWidth]]"></plugin-content-view>
    </template>

    <script>
        class ShopFind extends PluginElement {

            static get is() {
                return 'shop-find';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    },
                    haveNews:{
                        type:Boolean,
                        value:false
                    },
                    haveCoupon:{
                        type:Boolean,
                        value:false
                    },
                    haveDiscount:{
                        type:Boolean,
                        value:false
                    },
                    havePlugin:{
                        type:Boolean,
                        value:false
                    }
                }
            }
            ready(){
                super.ready();
                let dom = this;
                app.addEventListener("reload",function(e){
                    if(app.page=="find"){
                        dom._visibleChanged(true);
                    }
                });
            }
            _visibleChanged(visible) {
                if(visible){
                    this.$.xhr_news_count.get();
                    this.$.xhr_coupon_count.get();
                    this.$.xhr_discount_count.get();
                   this.$.xhr_plugin_list_by_category_point.param("plugin_category","sale").param("plugin_point","%shop-find%").param("app_id",app.appId).get();
                }
            }
            _newsCountSuccess(e){
                this.haveNews = this.news_count.result.count>0;
            }
            _couponCountSuccess(e){
                this.haveCoupon = this.coupon_count.result.count>0;
            }
            _discountCountSuccess(e){
                this.haveDiscount = this.discount_count.result.count>0;
            }
            _pluginSuccess(e){
                this.havePlugin = this.plugins&&this.plugins.length>0;
            }
            _openPlugin(e){
                this.$.xhr_open_page.setBody({page:app.httpHost+"/"+e.model.plugin.id+".pl/"+e.model.plugin.config.point["shop-find"]+"?app_id="+app.appId}).post();
            }
        }

        customElements.define(ShopFind.is, ShopFind);

    </script>

</dom-module>
